<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-13 13:10:22
 * @Description: file content
 * @FilePath: \ebook\src\components\home\HotSearchList.vue
-->
<template>
  <transition name="hot-search-move">
    <scroll class="hot-search-wrapper"
            :top="52"
            @onScroll="onScroll"
            ref="scroll">
      <div class="line"></div>
      <hot-search :label="$t('home.historySearch')"
                  :btn="$t('home.clear')"
                  :hotSearch="historySearch"
                  @removeAllHitorySearch="removeAllHitorySearch"></hot-search>
    </scroll>
  </transition>
</template>

<script>
import Scroll from '../common/Scroll.vue'
import HotSearch from './HotSearch'
import { storeHomeMixin } from '../../utils/mixin'

export default {
  mixins: [storeHomeMixin],
  components: {
    Scroll,
    HotSearch
  },
  computed: {
    historySearch () {
      return this.historySearchList
    }
  },
  methods: {
    onScroll (offsetY) {
      this.setHotSearchOffsetY(offsetY)
    },
    reset () {
      this.$refs.scroll.scrollTo(0, 0)
    },
    removeAllHitorySearch () {
      this.setHistorySearchList([])
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";

  .hot-search-wrapper {
    width: 100%;
    height: 100%;
    background: white;
    .line {
      width: 100%;
      height: 0;
      border-top: px2rem(1) solid #eee;
      margin: px2rem(10) 0;
    }
  }
</style>
